import React, { useEffect, useState } from 'react'
import { Col, Row, Card, Space, Table, Tag } from 'antd'
import './home.css'
import { getList } from '../../api/index'
import * as Icon from '@ant-design/icons'
import ECharts from '../../components/Echarts'
// 动态获取icon
const iconToElement = (item) => React.createElement(Icon[item])
const columns = [
  {
    title: '课程',
    dataIndex: 'name'
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy'
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy'
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy'
  }
]
// 订单统计数据
const countData = [
  {
    name: '今日支付订单',
    value: 1234,
    icon: 'CheckCircleOutlined',
    color: '#2ec7c9'
  },
  {
    name: '今日收藏订单',
    value: 3421,
    icon: 'ClockCircleOutlined',
    color: '#ffb980'
  },
  {
    name: '今日未支付订单',
    value: 1234,
    icon: 'CloseCircleOutlined',
    color: '#5ab1ef'
  },
  {
    name: '本月支付订单',
    value: 1234,
    icon: 'CheckCircleOutlined',
    color: '#2ec7c9'
  },
  {
    name: '本月收藏订单',
    value: 3421,
    icon: 'ClockCircleOutlined',
    color: '#ffb980'
  },
  {
    name: '本月未支付订单',
    value: 1234,
    icon: 'CloseCircleOutlined',
    color: '#5ab1ef'
  }
]
const Home = () => {
  const userimg = require('../../assets//images/user.png')
  // 定义table数据
  const [tableDate, setTableDate] = useState([])
  // 创建echarts的响应数据
  const [echartData, setechartData] = useState([])
  // dom首次渲染完成
  useEffect(() => {
    getList().then((data) => {
      const { tableData, orderData, userData, videoData } = data.data
      setTableDate(tableData)
      // 对于echarts数据组装
      const order = orderData
      // X轴数据
      const xData = order.date
      // series数据组装
      const keyArray = Object.keys(order.data[0])
      const series = []
      keyArray.forEach((item) => {
        series.push({
          name: item,
          data: order.data.map((items) => items[item]),
          type: 'line'
        })
      })
      
      setechartData({
        order: {
          xData,
          series
        },
        user: {
          xData: userData.map((items) => items.date),
          series: [
            {
              name: '新增用户',
              data: userData.map((items) => items.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: userData.map((items) => items.active),
              type: 'bar'
            }
          ]
        },
        video: {
          series: {
            data: videoData,
            type: 'pie'
          }
        }
      })
    })
  }, [])
  return (
    <Row className="home">
      <Col span={8}>
        <Card hoverable>
          <div className="user">
            <img src={userimg} />
            <div className="userInfo">
              <p className="name">Admin</p>
              <p className="access">超级管理员</p>
            </div>
          </div>
          <div className="login-info">
            <p>
              上次登录时间：<span>2021-7-21</span>
            </p>
            <p>
              上次登录地点：<span>武汉</span>
            </p>
          </div>
        </Card>
        <Card hoverable>
          <div>
            <Table
              columns={columns}
              dataSource={tableDate}
              pagination={{
                position: ['none', 'none']
              }}
              rowKey={'name'}
            />
          </div>
        </Card>
      </Col>
      <Col span={16}>
        <div className="num">
          {countData.map((item, index) => {
            return (
              <Card hoverable key={index}>
                <div className="icon-box" style={{ background: item.color }}>
                  {iconToElement(item.icon)}
                </div>
                <div className="detail">
                  <p className="num">￥{item.value}</p>
                  <p className="txt">{item.name}</p>
                </div>
              </Card>
            )
          })}
        </div>
        {echartData.order && (
          <ECharts chartData={echartData.order} style={{ height: '280px' }} />
        )}
        <div className="graph">
          {echartData.user && (
            <ECharts
              chartData={echartData.user}
              style={{ height: '240px', width: '50%' }}
            />
          )}
          {echartData.video && (
            <ECharts
              chartData={echartData.video}
              isAxisChart= {false}
              style={{ height: '260px', width: '50%' }}
            />
          )}
        </div>
      </Col>
    </Row>
  )
}
export default Home
